<template>
  <require from="./script-task.css"></require>
  <require from="../../../../styles/sections.css"></require>
  <div class="section-panel" id="js-general-scriptTask-section">
    <div class="panel__heading">Script Task
      <i class="fas fa-info-circle feedback-modal__help-icon" title="Help: How to use the token" click.delegate="showTokenHelpModal()"></i>
    </div>
    <div class="panel__content">
      <table class="props-table">
        <tr>
          <th>Script
            <a class="script-task-enlarge-link" click.delegate="showModal = true"><small class="script-task-enlarge-text">Enlarge</small></a>
          </th>
          <td>
            <textarea class="props-input-textarea name-input" ref="scriptInput" value.bind="businessObjInPanel.script" change.delegate="updateScript()" disabled.bind="!isEditable"></textarea>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <modal if.bind="showModal"
         header-text="Editing: Script Task">
    <template replace-part="modal-body" autofocus>
      <textarea class="form-control script-task" value.bind="businessObjInPanel.script" change.delegate="updateScript()" rows="10" aria-multiline="true" autofocus wrap="soft" disabled.bind="!isEditable"></textarea>
    </template>
    <template replace-part="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal" click.delegate="showModal = false">Okay</button>
    </template>
  </modal>
</template>
